<template>
    <view class="cell">
        <view v-for="(item, index) in list" :key="index" class="cell-item"
            ><button @click="change(item)" :class="[`btn-square ${id === 3 ? 'btn-primary' : item.id === activeId ? 'btn-danger' : 'btn-info'}`]">
                {{ item.name }}
            </button></view
        >
    </view>
</template>

<script>
export default {
    data() {
        return {
            id: ""
        }
    },
    props: ["list", "activeId"],
    mounted() {
        this.id = Number(this.$pages().id)
    },
    methods: {
        change(val) {
            if (this.id === 3) {
                this.$navPage("/pages/video/play")
            } else {
                this.$emit("changeBtn", val)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.cell {
    display: flex;
    flex-wrap: wrap;
    margin: 30rpx;
    &-item {
        flex: 0 0 calc(33.3% - 20rpx);
        margin-bottom: 20rpx;
        margin-right: 20rpx;
        button {
            width: 100%;
        }
    }
}
</style>
